import { FC, useEffect } from 'react';
import { Button, Card, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import request from '@/utils/req';
import useModal from '@/hooks/useModal';
import useMakeList, { IParams } from '@/hooks/useMakeList';

type ItemType = {
  id: string;
  pointName: string;
  totalNum: number;
};

const AutoCoding: FC = () => {
  const triggerModal = useModal();
  const { loading, list, getList, paginationConfig } = useMakeList<ItemType, { deptCode: string }>({
    params: {
      type: 1,
    },
    api: {
      getList: (params: IParams) => request('/getMockList', { params }),
    },
  });
  const columns: ColumnsType<ItemType> = [
    {
      title: 'id',
      dataIndex: 'id',
      width: 300,
    },
    {
      title: '名称',
      dataIndex: 'pointName',
    },
    {
      title: '数量',
      dataIndex: 'totalNum',
      width: 200,
      sorter: (a, b) => {
        if (a.id === list[0].id || b.id === list[0].id) return 0;
        return a.totalNum - b.totalNum;
      },
    },
  ];
  const openModal = () => {
    triggerModal('confirm', {
      title: '试试',
      onOk: () =>
        new Promise(resolve => {
          setTimeout(() => {
            resolve('ok');
          }, 2000);
        }),
    });
  };
  useEffect(() => getList(), []);
  return (
    <Card>
      <Button onClick={openModal}>打开Modal</Button>
      <Table
        rowKey="id"
        columns={columns}
        dataSource={list}
        loading={loading}
        pagination={paginationConfig}
      />
    </Card>
  );
};
export default AutoCoding;
